<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#f4a6b4" indicator-active-color="#e94d6a" circular="true">
		  <swiper-item v-for="(item,index) in goodInfo.appendImgs" :key="index">
		      <view class="swiper-item" >
		          <image :src="item"></image>
		      </view>
		  </swiper-item>
		</swiper>
		<view class="productDetails">
			<!-- 商品简介& 价格-->
			<view>
				<view class="ProductDescription">
					<view>{{ goodInfo.discount }}折</view>
					<view>{{ goodInfo.goodName }}</view>
				</view>
				<view class="productprice">
					<view>{{ goodInfo.sellingPrice }}</view>
					<view class="line">{{ goodInfo.originalPrice }}</view>
				</view>
				<view class="salesvolume">
					<view>免邮费（偏远地区除外）</view>
					<view>已售{{ goodInfo.salesVolume }}件</view>
				</view>
			</view>
		</view>
		<view class="bg"></view>
		<!-- 规格 -->
		<view class="specification">
			<view class="specification_item" @click="togglePopup('bottom')">
				<view>规格</view> 
				 <view class="Area_img">
					<text v-if="!select">请选择</text>
					<text v-else>已选数量:{{ buyNum }}</text>
					<image src="../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
			             </view>
			</view>
			<view class="specification_item">
				<view>配送至</view>
				<view>
					<image src="../../static/images/Positioning_icon_03.png" class="position_icon"></image>
					<text class="address">广东省深圳市龙岗区坂田街道中兴路...</text>
				</view>
			    <view class="Area_img">
					<image src="../../static/images/arrow_icon_03.png" class="arrow_icon"></image>
			    </view>
			</view>
		</view>
		<view class="productDetails_title">商品详情</view>
		<!-- 商品详情图片 -->
		<view class="productDetails_view" v-html="goodInfo.details"></view>
		<!-- 底部导航栏 -->
		<view class="navbar">
			<view class="navbar_left">
				<view class="service" @click="goCustomer">
					<view>
						<image src="../../static/images/service_03.png" class="service_img"></image>
					</view>
					<view class="service_text">客服</view>
				</view>
				<view class="shopCar" @click="toShopCart">
					<view>
						<image src="../../static/images/shopCar_09_03.png" class="shopCar_img"></image>
					</view>
					<view class="shopCar_text">购物车</view>
				</view>
			</view>
			<view class="navbar_right">
				<view class="addShopCar" @click="addShopCar">加入购物车</view>
				<view class="BuyNow" @click="toOrderConfirm">立即购买</view>
			</view>
		</view>
		<!-- 规格弹出框 -->
		<view class="specification_popup">
			<uni-popup :show="type === 'bottom'" position="bottom" mode="fixed"  @hidePopup="togglePopup('')">
				<view class="repertory">
					<view class="repertory_left">
						<image src="../../static/images/productDetails_swiper_02.png" mode="aspectFit"></image>
					</view>
					<view class="repertory_right">
						<view class="price">￥{{ goodInfo.sellingPrice }}</view>
						<view class="reper">库存{{ goodInfo.num }}件</view>
						<view class="account">已选{{ specification }}</view>
					</view>
				</view>
				<!--<view class="productQuantity">
					<view>化妆品含量</view>
					<view>{{ specification }}</view>
				</view>-->
				<view class="purchaseQuantity">
					<view class="purchase_left">购买数量</view>
					<view class="select">
						<text class="minus" @click="minus">-</text>
						<text class="num">{{ buyNum }}</text>
						<text class="add" @click="add">+</text>
					</view>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				type: '',
                goodInfo: {},
				buyNum: 1,	                          
				select: false,
				specification: '20片'
			}
		},
		onLoad(option){
			//数据加载提示框
			uni.showLoading({
				title: '拼命加载中',
				mask: true
			});
			let self = this;
			uni.request({
				url: this.$store.state.URL+'goods/good/goods_info',
				method: 'GET',
				data: {
					id: option.id
				},
				success(res) {
					console.log(res.data);
					if(res.data.status){
						let data = res.data.data;
						data.appendImgs = data.appendImgs.split(",").filter(function(url){
							return url != '';
						});
						self.goodInfo = data;
					}
					uni.hideLoading();
				}
			})
		},
		methods: {
			add(){
				if(this.buyNum == this.num){
					return;
				}else{
					this.buyNum++;
				}
			},
			minus(){
				if(this.buyNum == 1){
					return;
				}else{
					this.buyNum--;
				}
            },
			addShopCar(){
				if(this.select){
					uni.request({
						url: this.$store.state.URL+"goods/shopping_cart/add_shopping_cart",
						data: {
							token: this.$store.state.token,
							goodID: this.goodInfo.id,
							skuID: '',
							num: this.buyNum
						},
						success(res) {
							console.log(res.data);
							if(res.data.status){
								uni.showToast({
									title: '添加成功！',
									duration: 2000
								});
							}else{
								uni.showToast({
									title: res.data.msg,
									duration: 2000,
									icon: 'none'
								});
							}
						},
						fail(e){
							console.log(e);
						}
					});
				}else{
					uni.showToast({
						title: '请选择规格信息',
						duration: 2000,
						icon: 'none'
					});
				}

			},

			//跳转确认订单
			toOrderConfirm(){
				var goodsMessage={"productId":this.goodInfo.id,"orderNum":this.buyNum};
				var goodsMe=[JSON.stringify(goodsMessage)]
				var orderDate={orderInfo:goodsMe}
				if(this.select){
					uni.redirectTo({
						url:"../membershipService/orderConfirm/orderConfirm?orderMessage="+JSON.stringify(orderDate)+"&page=prodectDetails"
					})
				}else{
					uni.showToast({
						title: '请选择规格信息',
						duration: 2000,
						icon: 'none'
					});
				}
				
				console.log(orderDate);
			},
			//跳转客服页面
			goCustomer(){
				uni.navigateTo({
					url:"../membershipService/customerService/customerService"
				})
			},
			toShopCart(){
				uni.switchTab({
					url:"../tabBar/shoppingCart/shoppingCart"
				})
			},
			togglePopup(type) {
				this.type = type;
                this.select = true;
			},
			onBackPress() {
				if (this.type !== '') {
					this.type = '';
					return true;
				}
			},
		}
	}
</script>

<style>
/* page{
	background:#F5F5F5;
} */
.select{
	width: 160upx;
	height: 40upx;
	box-sizing: border-box;
}
.select text{
	width: 40upx;
	height: 40upx;
	font-size: 24upx;
	text-align: center;
	line-height: 40upx;
	border-radius: 6upx;
}
.select .minus,.select .add{
	font-size: 30upx;
	color: #8d8d8d;
	background-color: #f5f5f5;
}
.select .num{
	margin: auto;
	width: 36upx;
	height: 36upx;
	line-height: 36upx;
	border: 1upx solid #e94d6a; 
	color: #e94d6a;
}
.swiper {
    height:750upx;
    width: 100%;
}
.swiper-item {
    height: 100%;
    width: 100%;
}
.swiper-item image {
    height:750upx;
    width:100%;
}
.productDetails{
	margin:20upx 20upx 0;
	background:#fff;
}
.ProductDescription{
	display:flex;
	justify-content: flex-start;
}
.ProductDescription view:nth-of-type(1){
	width:56upx;
	height:38upx;
	background:#fff;
	color:#f097a5;
	border-radius: 10upx;
	font-size: 20upx;
	border:1upx solid #f097a5;
	text-align: center;
	line-height: 38upx;
	margin-right:20upx;
}
.ProductDescription view:nth-of-type(2){
	font-size: 30upx;
	color:#222222;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width:600upx;
	height: 40upx;
}
.productprice{
	display: flex;
	justify-content: flex-start;
	margin-top:20upx;
}
.productprice view:nth-of-type(1){
	font-size:36upx;
	color: #e94d6a;
}
.productprice view:nth-of-type(2){
	font-size:20upx;
	color:#b7b7b7;
	margin-left:20upx;
	margin-top:10upx;
}
.line{
	text-decoration: line-through;
}
.salesvolume{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30upx;
}
.salesvolume view{
	font-size:20upx;
	color:#999999;
	margin-top:20upx;
}
.bg{
	width:100%;
	height:20upx;
	background: #F5F5F5;
}
.Area_img text{
	margin-right: 20upx;
	font-size:28upx;
	color:#999999;
}
.arrow_icon{
	 width:15upx;
	 height:36upx;
	 position: relative;
	 top:8upx;
}
.specification{
	margin:0 20upx;
}
.specification_item{
	display: flex;
	justify-content: space-between;
	border-bottom:1upx solid #e8e8e8;
	height: 88upx;
	line-height: 88upx;
}
.specification_item view:nth-of-type(1){
	font-size: 30upx;
	color:#333333;
}
.position_icon{
	width:33upx;
	height:42upx;
	position: relative;
	top:-20upx;
	left:-10upx;
}
.address{
	font-size:28upx;
	color:#333333;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width:460upx;
}
.productDetails_title{
	background: #F5F5F5;
	color:#333333;
	font-size:30upx;
	font-weight: 500;
	height: 86upx;
	line-height: 86upx;
	box-sizing: border-box;
	padding-left: 20upx;
}
.productDetails_img{
	width:100%;
	height:auto;
	display: block;
}
.navbar{
	position: fixed;
	bottom:0;
	width:100%;
	background:#fff;
    height:108upx;
	display: flex;
}
.navbar_left{
	width:31%;
	display: flex;
}
.navbar_right{
	width:69%;
	display: flex;
}
.service{
	margin-left:40upx;
	margin-top:12upx;
}
.service_img{
	width:46upx;
	height:47upx;
}
.service_text{
	font-size: 22upx;
	color:#333333;
}
.shopCar{
	margin-left:80upx;
	margin-top:12upx;
}
.shopCar_img{
	width:47upx;
	height:47upx;
}
.shopCar_text{
	font-size:20upx;
	color:#333333;
}
.addShopCar{
	font-size:28upx;
	color: #e94d6a;
	background: #fbe0e5;
	margin-left:30upx;
	width:50%;
	line-height: 108upx;
	text-align: center;
}
.BuyNow{
	font-size:28upx;
	color: #fff;
	background: #f2526f;
	width:50%;
	line-height: 108upx;
	text-align: center;
}
.productDetails_view{
	margin-bottom:108upx;
}
.repertory{
	display: flex;
	justify-content: flex-start;
	position: relative;
	border-bottom:1upx solid #e0e0e0;
}
.repertory_left{
	width:260upx;
	height: 260upx;
	box-shadow: 5upx 5upx 10upx #f8f8f8,
	            -5upx -5upx 10upx #f8f8f8;
	text-align: center;
	line-height: 260upx;
	position:relative;
	top:-92upx;
	left:26upx;
	background:#fff;
	z-index: 9999;
	border-radius: 20upx;
	margin-right: 60upx;
}
.repertory_left image{
	width:250upx;
	height: 238upx;
	margin:30upx 0;
}
.repertory_right view{
	margin:10upx 0;
}
.price{
	font-size:36upx;
	color:#e94d6a;
	text-align: left;
}
.reper{
	font-size:28upx;
	color:#333333;
	text-align: left;
}
.account{
	font-size:28upx;
	color:#333333;
}
.productQuantity{
	margin-left:30upx;
	margin-top:60upx;
	border-bottom:1upx solid #e0e0e0;
}
.productQuantity view:nth-of-type(1){
	font-size:30upx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 30upx;
}
.productQuantity view:nth-of-type(2){
	font-size:24upx;
	color: #e94d6a;
    background:#fff;
	border: 1upx solid #e94d6a;
	border-radius: 15upx;
	width:84upx;
	height: 44upx;
	text-align: center;
	line-height: 44upx;
	margin-bottom:30upx;
}
.purchaseQuantity{
	margin-left:30upx;
	margin-top:60upx;
	border-bottom:1upx solid #e0e0e0;
	display: flex;
	justify-content: space-between;
}
.purchase_left{
	font-size:30upx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 30upx;
}
.select{
	display: flex;
	justify-content: space-between;
	width: 160upx;
	height: 40upx;
	box-sizing: border-box;
	margin-right: 30upx;
}
.select text{
	width: 40upx;
	height: 40upx;
	font-size: 24upx;
	text-align: center;
	line-height: 40upx;
	border-radius: 6upx;
}
.select .minus,.select .add{
	font-size: 30upx;
	color: #8d8d8d;
	background-color: #f5f5f5;
}
.select .num{
	margin: auto;
	width: 36upx;
	height: 36upx;
	line-height: 36upx;
	border: 1upx solid #e94d6a; 
	color: #e94d6a;
}
.purchase_right{
	margin-right: 30upx;
	display: flex;
	justify-content: space-between;
}
.purchase_right view{
	margin:0 10upx;
}
.add{
	color:#b7b7b7;
	font-size:30upx;
	background: #f5f5f5;
	width:34upx;
	height:34upx;
	line-height: 34upx;
	text-align: center;
	border-radius: 8upx;
}
.number{
	width:34upx;
	height:34upx;
	line-height: 34upx;
	text-align: center;
	border-radius: 8upx;
	color:#e94d6a;
	background: #f5f5f5;
	border:1upx solid #e94d6a;
}
.subtract{
	color:#b7b7b7;
	font-size:30upx;
	background: #f5f5f5;
	width:34upx;
	height:34upx;
	line-height: 34upx;
	text-align: center;
	border-radius: 8upx;
}
.confirm{
	margin-top:30upx;
	margin-bottom: 30upx;
}
.confirm button{
	font-size: 28upx;
	color: #fff;
	background: #e94d6a;
	margin:0 30upx;
}
</style>
